<template>
	<view class="u-flex-1 u-flex-col">
		<u-sticky>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<scroll-view scroll-y="true" class="u-flex-1" style="height: 100rpx" @scrolltolower='tolower'>
			<w-shop-recommend v-if="current==0"></w-shop-recommend>
			<w-shop-commodity :status='status' :bannerList='bannerList' :list='showList' v-else></w-shop-commodity>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCategoryList,goodsQueryGoods
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	export default {
		name: "w-shop-home",
		data() {
			return {
				list: [],
				current: 0,
				bannerList: [],
				showList: [],
				pageList: [],
				status:'loadmore'
			};
		},
		mounted() {
			this.getCategoryList()
		},
		methods: {
			tolower(){
				if(this.current==0)return
				this.status=this.pageList[this.current-1].status
				this.pageList[this.current-1].pageNo++
				this.goodsQueryGoods(this.list[this.current].id,this.current-1)
			},
			getCategoryList() {
				getCategoryList().then(res => {
					this.list = [{
						name: '推荐'
					}]
					let index = -1
					res.map(item => {
						if (item.showIndex == 1) {
							this.pageList.push({
								bannerList: [],
								list: [],
								pageNo:1,
								status:'loading'
							})
							index++
							this.list.push({
								name: item.name,
								id:item.id
							})
							this.pageList[index].bannerList = item.bannerList.map(item=>{
								return {
									image:$shopImgUrl+item.idFile,
									...item
								}
							})
						}
					})
				})
			},
			schange(e) {
				this.current = e.detail.current;
			},
			goodsQueryGoods(id,index){
				goodsQueryGoods({idCategory:id,pageNo:this.pageList[index].pageNo,pageSize:10}).then(res=>{
					const arr = res.list
					if(arr.length==10){
						this.pageList[index].status = 'loadmore'
					}else{
						this.pageList[index].status = 'nomore'
					}
					this.pageList[index].list = [...this.pageList[index].list,...arr.map(item=>{
						return {
							src:$shopImgUrl+item.pic,
							...item
						}
					})]
					this.showList = this.pageList[index].list
					this.status = this.pageList[index].status
				})
			},
			change(index) {
				this.current = index;
				if(index==0)return
				this.bannerList = this.pageList[index - 1].bannerList
				if(this.pageList[index - 1].list.length){
					this.showList = this.pageList[index - 1].list
					this.status = this.pageList[index - 1].status
				}else{
					this.goodsQueryGoods(this.list[index].id,index-1)
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
